<template>
    <div>
        <template v-for="(btn, idx) of field.buttons" :key="idx">
            <template v-if="btn.display ? btn.display(row, field) : true">
                <!-- 常规按钮 -->
                <TButton @click="onButtonClick(btn)" v-if="btn.render === 'basicButton'" :btn="btn" :row="row" :field="field" />
                <!-- 带tip的按钮 -->
                <el-tooltip
                    v-if="btn.render === 'tipButton'"
                    :disabled="btn.title ? false : true"
                    :content="btn.title"
                    placement="top"
                    v-bind="btn.tooltip"
                >
                    <TButton @click="onButtonClick(btn)" :btn="btn" :row="row" :field="field" />
                </el-tooltip>
                <!-- 带确认框的按钮 -->
                <el-popconfirm
                    v-if="btn.render == 'confirmButton'"
                    :disabled="btn.disabled && btn.disabled(row, field)"
                    v-bind="btn.popconfirm"
                    @confirm="onButtonClick(btn)"
                >
                    <template #reference>
                        <div class="ml-6">
                            <el-tooltip :disabled="btn.title ? false : true" :content="btn.title" placement="top" v-bind="btn.tooltip">
                                <TButton :btn="btn" :row="row" :field="field" />
                            </el-tooltip>
                        </div>
                    </template>
                </el-popconfirm>
            </template>
        </template>
    </div>
</template>
<script setup lang="ts">
import { TableColumnCtx } from 'element-plus'
import TButton from '/@/components/table/button.vue'

interface Props {
    row: TableRow
    field: TableColumn
    column: TableColumnCtx<TableRow>
    index: number
}
const props = defineProps<Props>()

const onButtonClick = (btn: OptButton) => {
    if (typeof btn.click === 'function') {
        btn.click(props.row, props.field)
        return
    }
}
</script>
<style lang="scss" scoped>
.ml-6 {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}
</style>
